<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="demo"></div>
        <script>
            const vm = new Vue({
                el:'#demo',
                data: {
                    firstName:'atguigu'
                },
                computed:{
                    fullName:{
                        get(){

                        },
                        set(){

                        }
                    }
                }
            })
            console.log(vm)

            function MyVue(config){
                this._data = config.data
                // data中的数据代理
                Object.keys(this._data).forEach(attr=>{
                    Object.defineProperty(this, attr, {
                        get(){
                            return this._data[attr]
                        },
                        set(val){
                            this._data[attr] = val
                        }
                    })
                })
                // 计算属性的数据代理
                Object.keys(config.computed).forEach(attr=>{
                    let get = null;
                    let set = null;
                    let obj = config.computed[attr]
                    if(typeof obj === 'function'){
                        get = obj
                        set = function(){}
                    }else{
                        get = obj.get
                        set = obj.set
                    }
                    Object.defineProperty(this, attr, {
                        get,
                        set
                    })
                })
            }

            const myVue = new  MyVue({
                data:{
                    xxx:123,
                    yyy:222
                },
                computed:{
                    total:()=>{

                    },
                    fullName:{
                        get(){
                        
                        },
                        set(){

                        }
                    }
                }
            })
            console.log('myVue', myVue)
        </script>
    </body>
</html>